<template>
	<!-- 不用v-show是为了支付宝小程序 -->
  <view class="content" :style="{height,width,display:type?'':'none'}">
    <view class="nodata-refresh">
      <view :style="{display:type=='loading'?'':'none'}">
        <view class="nodata-refresh-loding">
          <text class="iconfont icon-loading"></text>
        </view>
        <image src="@/static/image/logo.png" class="loding-icon-url">
        <view class="loading-text">
          加载中...
        </view>
      </view>
        <!-- <image :style="{display:type=='noData'?'':'none'}" src="@/static/image/noData.png" mode="widthFix" class="no-data"> -->
      <text :style="{display:type!='loading'?'':'none'}" @click="refresh">{{type=='error'?'加载失败':'暂无数据'}}, 点击刷新</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    top: {
      //距离顶部位置
      default: "35vh",
      type: String,
    },
    height: {
      default: "100%",
      type: String,
    },
    width: {
      default: "100vw",
      type: String,
    },
  },
  data() {
    return {
      type: false,
    };
  },
  onShow() {},
  created() {},
  methods: {
    show(type) {
      this.type = type;
    },
    refresh() {
      this.$emit("refresh");
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  .nodata-refresh {
    color: $theme-color;
    width: 100%;
    text-align: center;
    // position: fixed;
    @keyframes loadingRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .nodata-refresh-loding {
      animation: loadingRotate 1s linear 0s infinite normal;
      display: inline-block;
      text {
        font-size: 60rpx;
      }
    }
    .no-data {
      width: 100%;
    }
    .loding-icon-url {
      width: 40rpx;
      height: 40rpx;
      border-radius: 40rpx;
      // position: absolute;
      margin: 6rpx 0 0 -52rpx;
    }
    .loading-text {
      font-size: $small-font-size;
    }
  }
}
</style>
